Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
img { --s: 15px; /* size of the frame */ --b: 2px; /* border thickness */ --w: 200px; /* width of the image */ --c: #7B3B3B; width: var(--w); aspect-ratio: 1; object-fit: cover; padding: calc(2*var(--s)); --_g: var(--c) var(--b),#0000 0 calc(100% - var(--b)),var(--c) 0; background: linear-gradient( var(--_g)) 50%/100% var(--_i,100%) no-repeat, linear-gradient(90deg,var(--_g)) 50%/var(--_i,100%) 100% no-repeat; outline: calc(var(--w)/2) solid #0009; outline-offset: calc(var(--w)/-2 - 2*var(--s)); transition: .4s; cursor: pointer; } img:hover { outline: var(--b) solid var(--c); outline-offset: calc(var(--s)/-2); --_i: calc(100% - 2*var(--s)); } body { margin: 0; min-height: 100vh; display: grid; place-content: center; align-items: center; grid-auto-flow: column; gap: 20px; background: #e8e8e8; }